<template>
    <el-drawer
            title="设置推送规则"
            :visible.sync="drawer"
            size="40%"
            direction="rtl"
            custom-class="demo-drawer"
            :before-close="closeHandle">
        <div class="demo-drawer__content">
            <el-form ref="form" label-position="left" :model="sendForm" label-width="120px" class="el-form">
                <el-form-item label="推送至：">
                    <el-radio v-model="sendForm.sendPlace" label="1">全公司</el-radio>
                    <el-radio v-model="sendForm.sendPlace" label="2">部门</el-radio>
                    <el-radio v-model="sendForm.sendPlace" label="3">成员</el-radio>
                </el-form-item>
                <el-form-item label="推送部门：" v-if="sendForm.sendPlace == 2">
                    <el-button type="primary" @click="departmentVisible = true">选择部门</el-button>
                    <span style="margin-left: 10px">已选择{{ sendForm.departments.length }}个部门</span>

                    <el-dialog title="选择部门" :visible.sync="departmentVisible" width="60%" :close-on-click-modal="false"
                               :destroy-on-close="true" :modal="false">
                        <MultipleSelect ref="selectMultipleDepartment" :listFields="listFields"
                                        :dataSource="departmentList" type="filter"></MultipleSelect>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="departmentVisible = false">取 消</el-button>
                            <el-button type="primary" @click="submitMultipleDepartment">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-form-item>
                <el-form-item v-if="sendForm.departments.length > 0 && sendForm.sendPlace == 2">
                    <el-tag v-for="tag in sendForm.departments" :key="tag.name" closable @close="closeTagHandle(tag)"
                            style="margin-right: 10px"> {{ tag.name }}
                    </el-tag>
                </el-form-item>
                <el-form-item label="推送成员：" v-if="sendForm.sendPlace == 3">
                    <el-button type="primary" @click="memberVisible = true">选择成员</el-button>
                    <span style="margin-left: 10px">已选择{{ sendForm.members.length }}名成员</span>

                    <el-dialog title="选择成员" :visible.sync="memberVisible" width="60%" :close-on-click-modal="false"
                               :destroy-on-close="true" :modal="false">
                        <MultipleSelect ref="selectMultipleMember" :listFields="listFields" :dataSource="memberList"
                                        type="filter"></MultipleSelect>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="memberVisible = false">取 消</el-button>
                            <el-button type="primary" @click="submitMultipleMember">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-form-item>
                <el-form-item v-if="sendForm.members.length > 0 && sendForm.sendPlace == 3">
                    <el-tag v-for="tag in sendForm.members" :key="tag.name" closable @close="closeTagHandle(tag)"
                            style="margin-right: 10px"> {{ tag.name }}
                    </el-tag>
                </el-form-item>
                <el-form-item label="推送方式：">
                    <el-radio v-model="sendForm.sendType" label="1">每天</el-radio>
                    <el-radio v-model="sendForm.sendType" label="2">每周</el-radio>
                    <el-radio v-model="sendForm.sendType" label="3">每月</el-radio>
                    <el-radio v-model="sendForm.sendType" label="4">每年</el-radio>
                </el-form-item>
                <el-form-item label="推送时间：" v-if="sendForm.sendType == 1">
                    <el-time-picker
                            v-model="sendForm.sendTime"
                            placeholder="任意时间点">
                    </el-time-picker>
                </el-form-item>
                <el-form-item label="推送日期：" v-else>
                    <el-date-picker
                            v-model="sendForm.sendDate"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="drawer = false">取 消</el-button>
                <el-button type="primary" @click="drawer = false;$message('成功')">确 定</el-button>
            </div>
        </div>

    </el-drawer>
</template>

<script>

import MultipleSelect from "@/components/list_multiple_select/list_multiple_select"

export default {
    name: "set_send_rule",
    components: {
        MultipleSelect
    },
    data() {
        return {
            drawer: false,
            departmentVisible: false,
            memberVisible: false,
            sendForm: {
                sendPlace: '1',
                members: [],
                departments: [],
                sendType: '1',
                sendTime: '',
                sendDate: ''
            },
            listFields: {
                name: '名称'
            },
            memberList: [],
            departmentList: []
        }
    },
    mounted() {
        let that = this
        for (let i = 0; i < 10; i++) {
            that.memberList.push(
                {
                    id: i,
                    name: '名称' + (i + 1)
                }
            )
        }
        for (let i = 0; i < 10; i++) {
            that.departmentList.push(
                {
                    id: i,
                    name: '部门' + (i + 1)
                }
            )
        }
    },
    methods: {
        closeHandle(done) {
            this.$confirm('确认关闭？').then(_ => {
                done();
            }).catch(_ => {
            });
        },
        open() {
            this.drawer = true
        },
        submitMultipleMember() {
            let data = this.$refs.selectMultipleMember.getData();
            this.sendForm.members = data
            this.memberVisible = false
        },
        submitMultipleDepartment() {
            let data = this.$refs.selectMultipleDepartment.getData();
            this.sendForm.departments = data
            this.departmentVisible = false
        },
        closeTagHandle(tag) {
            this.sendForm.members.splice(this.sendForm.members.indexOf(tag), 1);
        }
    }
}
</script>

<style scoped>
/deep/ .el-drawer__body {
    padding: 20px;
}

/deep/ .el-dialog .el-dialog__body {
    padding: 0 20px;
}

/deep/ .el-dialog .el-dialog__body .interspaceH {
    height: 0;
}

.demo-drawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.demo-drawer__content form {
    flex: 1;
}

.demo-drawer__footer {
    display: flex;
}

.demo-drawer__footer button {
    flex: 1;
}
</style>